import React from "react";
import { inject, observer } from "mobx-react";

@inject("hbStore")
@observer
class mobxIndex extends React.Component {
  constructor(props) {
    super(props);
    this.state = {};
  }

  handleTodos(type) {
    let { hbStore } = this.props;
    switch (type) {
      case "add":
        hbStore.addTodo(Math.random())
        break;
      case "del":
        hbStore.deleteTodo()
        break;
      case "reset":
        hbStore.resetTodo()
        break;
      default:
    }
  }

  render() {
    let { hbStore } = this.props;
    return (
      <div>
        {hbStore.time}
        <div>
          {hbStore.desc}
        </div>
        <div>
          <button onClick={this.handleTodos.bind(this, "add")}>
            添加一行数据
          </button>
        </div>
        <div>
          <button onClick={this.handleTodos.bind(this, "del")}>
            删除一行数据
          </button>
        </div>
        <div>
          <button onClick={this.handleTodos.bind(this, "reset")}>
            重置数据
          </button>
        </div>
        <ul>
          {hbStore.todos.map((item, index) => {
            return (
              <li key={item}>
                {item}
              </li>
            )
          })}
        </ul>
      </div>
    );
  }
}
export default mobxIndex;
